<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>初识Vue</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<div id="root">
		</div>

		<script type="text/javascript" >
			//Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
            let data ={
				name:"123",
				address:"456"
			}
			
			//创建一个监视对象用来监视data
			const obs =new Observer(data)
			console.log(obs)


			let vm={}
			vm._data= data= obs 
			function Observer(obj){
               //汇总对象中所以的属性形成数组
			   const keys =Object.keys(obj)
			   keys.forEach((k)=>{
				Object.defineProperty(this,k,{
                  get(){
                     return obj[k]
				  },
				  set(val){
					obj[k]=val
				  }
				})
			   })
			}
			//错误示范
			// Object.defineProperty(data,'name',{
			// 	get(){
			// 		return data.name
			// 	},
			// 	set(val){
            //        data.name=val
			// 	}
			// })

		</script>
	</body>
</html>

